import React from 'react'
import { Form, Input, message } from 'antd'
import axios from 'axios';
import { calculateWidth } from '../../utils/utils'
import PromptBox from '../../components/PromptBox'

class RegisterForm extends React.Component {
    state = {
        focusItem: -1
        }
        // 点击注册
    registerSubmit = (e) => {
            e.preventDefault()
                this.setState({
                focusItem: -1
                })
                let that=this;
            this.props.form.validateFields((err, values) => {
                if (!err) {
                    var api = 'http://127.0.0.1:7001';
                    axios.get(api+'/getadmin?adminid='+values.registerUsername)
                    .then(function (response) {
                        console.log(response);
                        if (response.data.data!=null) {
                            that.props.form.setFields({
                                registerUsername: {
                                value: values.registerUsername,
                                errors: [new Error('该用户名已经注册')]
                                }
                            })
                            return
                            } else {
                                // var params=new URLSearchParams();
                                // params.append('adminid',values.registerUsername);
                                // params.append('password',values.registerPassword);
                                axios.get(api+'/addadmin?adminid='+values.registerUsername+'&password='+values.registerPassword)
                                .then(function (response) {
                                    if (response.data.data!=null) {
                                        that.props.switchShowBox('login')
                                        message.success('注册成功')
                                    }
                                })
                            }

                    })                   
                }
            })
        }
    gobackLogin = () => {
        this.props.switchShowBox('login')
        setTimeout(() => this.props.form.resetFields(), 500)
    }
    render () {
        const {getFieldDecorator, getFieldError, getFieldValue} = this.props.form
        const {focusItem} = this.state
        return (
            <div className={this.props.className}>
                <h3 className='title'>管理员注册</h3>
                <Form onSubmit={this.registerSubmit}>
                <Form.Item help={getFieldError('registerUsername') && <PromptBox info={getFieldError('registerUsername')}
                                                                                width={calculateWidth(getFieldError('registerUsername'))}/>}>
                    {getFieldDecorator('registerUsername', {
                    validateFirst: true,
                    rules: [
                        {required: true, message: '用户名不能为空'},
                        {pattern: '^[^ ]+$', message: '不能输入空格'},
                    ]
                    })(
                    <Input
                        onFocus={() => this.setState({focusItem: 0})}
                        onBlur={() => this.setState({focusItem: -1})}
                        maxLength={16}
                        placeholder='用户名'
                        addonBefore={<span className='iconfont icon-User' style={focusItem === 0 ? styles.focus : {}}/>}/>
                    )}
                </Form.Item>
                <Form.Item help={getFieldError('registerPassword') && <PromptBox info={getFieldError('registerPassword')}
                                                                                width={calculateWidth(getFieldError('registerPassword'))}/>}>
                    {getFieldDecorator('registerPassword', {
                    validateFirst: true,
                    rules: [
                        {required: true, message: '密码不能为空'},
                        {pattern: '^[^ ]+$', message: '密码不能有空格'}
                    ]
                    })(
                    <Input
                        onFocus={() => this.setState({focusItem: 1})}
                        onBlur={() => this.setState({focusItem: -1})}
                        type='password'
                        maxLength={16}
                        placeholder='密码'
                        addonBefore={<span className='iconfont icon-suo1' style={focusItem === 1 ? styles.focus : {}}/>}/>
                    )}
                </Form.Item>
                <Form.Item help={getFieldError('confirmPassword') && <PromptBox info={getFieldError('confirmPassword')}
                                                                                width={calculateWidth(getFieldError('confirmPassword'))}/>}>
                    {getFieldDecorator('confirmPassword', {
                    validateFirst: true,
                    rules: [
                        {required: true, message: '请确认密码'},
                        {
                        validator: (rule, value, callback) => {
                            if (value && value !== getFieldValue('registerPassword')) {
                            callback('两次输入不一致！')
                            }
                            callback()
                        }
                        },
                    ]
                    })(
                    <Input
                        onFocus={() => this.setState({focusItem: 2})}
                        onBlur={() => this.setState({focusItem: -1})}
                        type='password'
                        maxLength={16}
                        placeholder='确认密码'
                        addonBefore={<span className='iconfont icon-suo1' style={focusItem === 2 ? styles.focus : {}}/>}/>
                    )}
                </Form.Item>
                <div className='bottom'>
                    <input className='loginBtn' type="submit" value='注册'/>
                    <span className='registerBtn' onClick={this.gobackLogin}>返回登录</span>
                </div>
                </Form>
                <div className='footer'>
                <div>欢迎登陆后台管理系统</div>
                </div>
            </div>
            )
        }
}
const styles = {
    focus: {
        width: '20px',
        opacity: 1
        },
    }

export default Form.create()(RegisterForm)